<template>
  <div style="height: 100%" class="job-detail-box">
    <div class="job-detail-header">
      <div class="job-header-info">
        <div class="job-detail-info">
          <span class="job-name" style="max-width: 425px"
            >中高级前端开发工程师</span
          ><span class="job-salary">5-10K</span>
        </div>
        <ul data-v-6f663ed7="" class="tag-list">
          <li data-v-6f663ed7="">
            <i class="el-icon-location-outline"></i>
            <a data-v-6f663ed7="" href="/c101200100/" title="武汉招聘">武汉</a>
          </li>
          <li data-v-6f663ed7="">
            <i class="el-icon-time"></i><span>5-10年</span>
          </li>
          <li data-v-6f663ed7="">
            <i class="el-icon-reading"></i><span>大专</span>
          </li>
        </ul>
      </div>
      <div data-v-6f663ed7="" class="job-detail-op clearfix">
        <a
          data-v-6f663ed7=""
          href="javascript:;"
          ka="cpc_job_list_chat_96be58d8a1498d121HBy3du1F1VW"
          class="op-btn op-btn-chat"
          >立即沟通</a
        >
      </div>
    </div>
    <div class="job-detail-body">
         <el-scrollbar wrap-class="scrollbar-full" view-class="view-scrollbar-full" style="height: 100%;">
      <div class="job-detail-operate">
        <h3 class="title">职位描述</h3>
      </div>
      <div class="desc">
        <span class="job">中高级前端开发工程师</span>
        <span>任职要求：</span>
        <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      </div>
      <div class="job-boss-info">
        <div class="detail-figure">
          <el-avatar :size="50" src="https://empty" @error="errorHandler">
            <img
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </el-avatar>
        </div>
        <h2 class="name">
          <span> 张女士 </span
          ><el-tag type="warning" size="mini" style="margin-left: 8px"
            >面试官</el-tag
          >
        </h2>
        <div class="boss-info-attr">易诚互动 · 招聘经理</div>
      </div>
      <div class="job-address">
        <span class="job-address-title">工作地址：</span>
        <p class="job-address-desc">
          <i
            class="el-icon-map-location"
            style="color: #00bebd; margin-right: 4px; font-size: 18px"
          ></i
          >武汉江汉区嘉颐新都青年路
        </p>
      </div>
      <div style="padding:20px">
       <div id="map-container" style="width: 100%; height: 300px;padding: 0 20px;"></div>
       </div>
       </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  mounted() {
    this.initMap();
  },
  data() {
    return {
      count: 0,
      list: [
        "1.精通Vue、React等前端框架",
        "2.熟悉JavaScript ES6+语法规范",
        "3.熟练使用webpack构建工具",
        "4.熟练使用Git版本控制工具",
        "5.熟练使用CSS预处理器（如Sass/Less）",
        "6.有大型项目开发经验，有独立完成项目的经历",
        "7.有良好的团队协作能力和沟通能力",
      ],
    };
  },
  methods: {
    initMap() {
      // 基于准备好的dom，初始化地图
      var map = new BMap.Map("map-container");
      // 设置地图中心点
      var point = new BMap.Point(116.404, 39.915);
          map.centerAndZoom(point, 15);
           

      // 启用地图拖拽事件
      map.enableDragging();

      // 启用滚轮放大缩小
      map.enableScrollWheelZoom(true);

      // 其他地图设置...
    },
  },
};
</script>
<style lang="scss" scoped>
.job-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  border-radius: 16px 16px 0 0;
  transition: box-shadow 0.2slinear;
  border-bottom: 1px solid #ebeef5;
}
.job-header-info {
  flex: 1;
  max-width: 550px;
}
.job-detail-info {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.job-name {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-salary {
  font-size: 24px;
  font-family: kanzhun-mix, kanzhun-Regular;
  color: #fe574a;
  line-height: 29px;
  flex-shrink: 0;
  margin-left: 20px;
}
.tag-list {
  overflow: hidden;
  height: 20px;
  margin-top: 12px;
  display: flex;
  margin-left: -40px;
}
.tag-list li {
  position: relative;
  color: #222;
  line-height: 20px;
  font-size: 14px;
  display: flex;
  i {
    color: #00bebd;
    margin-right: 4px;
    font-size: 18px;
  }
  align-items: center;
  margin-right: 14px;
}
li,
ol,
ul {
  list-style: none;
}
.job-detail-op {
  flex-shrink: 0;
}

.op-btn {
  float: left;
  width: 104px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  line-height: 20px;
  padding: 7px 20px;
  color: #00a6a7;
  border: 1px solid #00bebd;
  transition: all 0.2slinear;
}

.op-btn-chat {
  border: none;
  background: #00bebd;
  color: #fff;
}

.job-detail-body {
  height: calc(100% - 120px);
  // padding: 0 20px;
  .job-detail-operate {
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #222;
      line-height: 22px;
      margin-left: 26px;
    }
  }
  .desc {
    padding-bottom: 10px;
    border-bottom: 1px solid #ebeef5;
    span {
      display: block;
      font-size: 14px;
      color: #222;
      line-height: 25px;
      text-align: justify;
      white-space: pre-wrap;
      word-break: break-all;
      margin-left: 26px;
    }
    .job {
    }
  }
  .job-boss-info {
    padding-left: 28px;
    border-bottom: 1px solid #ebeef5;
    padding-bottom: 10px;
    .detail-figure {
      position: relative;
      float: left;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      border: 1px solid #f6fdfd;
      border-radius: 100%;
    }
    .name {
      font-size: 16px;
      font-weight: 500;
      color: #222;
      line-height: 22px;
      display: flex;
      align-items: center;
    }
    .boss-info-attr {
      font-size: 12px;
      color: #666;
      line-height: 17px;
      margin-top: 4px;
      display: flex;
      align-items: center;
    }
  }
  .job-address {
    margin-top: 24px;
    .job-address-title {
      font-size: 16px;
      font-weight: 600;
      color: #222;
      line-height: 22px;
      padding-left: 28px;
    }
    .job-address-desc {
      margin-top: 12px;
      font-size: 14px;
      color: #333;
      line-height: 20px;
      display: flex;
      align-items: center;
      word-break: break-all;
      padding-left: 28px;
    }
  }
}
</style>